import React, { Component, PureComponent } from 'react'

class SomeComponent extends PureComponent {
  render () {
    console.log('子组件刷新了') // 只要点击 加 一直打印
    return (
      <div>SomeComponent</div>
    )
  }
}
export default class App extends Component {
  state = { count: 10, test: '测试' }
  add = () => {
    this.setState({
      count: this.state.count + 10
    })
  }
  render() {
    return (
      <div>
        <button onClick = { this.add }>加</button>
        {/* 虽然看起来没有发生改变，但是如果组件调用时 数据的值是对象，数组，函数，即使子组件继承自 PureComponent
        子组件也会被重新渲染
        */}
        <SomeComponent test={ this.state.test } style = { { fontSize: 14 }} doSomething = { () => {
          console.log('do something')
        }} />
      </div>
    )
  }
}

